<template>
  <div class="search-result-list">
    <el-row :gutter="30" v-loading="loading">
      <el-col class="result-item" :span="8" :md="4" :lg="4" v-for="item of data" :key="item.partnerId">
        <el-card>
          <div class="content-box">
            <cImage style="width: 100%; height: 100%" :imageId="item.logoId" fit="contain"></cImage>
            <div class="command-list">
              <ul class="command-menu">
                <li class="command-menu__item" v-for="command of commandList" @click="handleCommand(command.value, item)" :key="command.value">{{ command.label }}</li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <pagination v-show="total > 0" :total="total" :page.sync="pagination.PageIndex" :limit.sync="pagination.PageSize" @pagination="getData()" />
    <component :is="componentName" :visible.sync="dialogVisible" title="解决方案" :data.sync="dialogForm" @loading="getData"></component>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination';
import { getDataMap, deleteDataMap, enableDataMap, disableDataMap, componentNameMap } from './interfaceConfig';
import { commandList } from '@/utils/config';
import cImage from '@/components/Image';

import EditPartner from '@/components/DialogComponents/partner';

export default {
  name: 'search-result-list',
  components: {
    Pagination,
    EditPartner,
    cImage
  },
  props: {
    uid: {
      default: 'search-result',
      type: String,
      required: true
    },
    params: {
      type: [Object, undefined],
      default: undefined
    },
    ignoreCommand: {
      type: [Array, undefined],
      default: () => []
    }
  },
  data() {
    return {
      data: [],
      loading: false,
      total: 0,
      pagination: {
        PageIndex: 1,
        PageSize: 10
      },

      customIgnoreCommand: [],
      componentName: componentNameMap[this.uid],
      dialogVisible: false,
      dialogForm: {},

      // 命令列表
      commandList: commandList.filter(item => !this.ignoreCommand.includes(item.value))
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    async getData(params) {
      try {
        this.loading = true;
        const nextParams = Object.assign({}, this.params, this.pagination, params);

        const res = await getDataMap[this.uid](nextParams);

        this.data = res.data.data;
        this.total = res.data.count;
      } catch (e) {
        console.log('Search Result Table: uid: ', this.uid, '\n', e);
      } finally {
        this.loading = false;
      }
    },

    // 删除数据
    async handleDelete(row) {
      try {
        this.loading = true;
        let res = await deleteDataMap[this.uid](row);

        this.getData();
        this.$message.success('删除成功');
      } catch (e) {
        console.log('Search Result delete: uid: ', this.uid, '\n', e);
        this.$message.error('删除失败');
      } finally {
        this.loading = false;
      }
    },

    // 启用
    async handleEnable(row) {
      try {
        this.loading = true;
        let res = await enableDataMap[this.uid](row);

        this.getData();
        this.$message.success('启用成功');
      } catch (e) {
        console.log('Search Result Enable: uid: ', this.uid, '\n', e);
        this.$message.error('启用失败');
      } finally {
        this.loading = false;
      }
    },

    // 禁用
    async handleDisable(row) {
      try {
        this.loading = true;
        let res = await disableDataMap[this.uid](row);

        this.getData();
        this.$message.success('禁用成功');
      } catch (e) {
        console.log('Search Result Disable: uid: ', this.uid, '\n', e);
        this.$message.error('禁用失败');
      } finally {
        this.loading = false;
      }
    },

    handleAdd() {
      this.dialogVisible = true;
      this.dialogForm = {};
    },

    handleDetail(row) {
      this.$emit('detail', row);
    },

    handleCommand(command, prevRow) {
      const row = { ...prevRow };

      switch (command) {
        case 'delete':
          this.$confirm('确定要删除这条数据吗？', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.handleDelete(row);
          });
          break;

        case 'edit':
          this.dialogVisible = true;
          this.dialogForm = row;
          this.$emit('edit', row);
          break;

        case 'add':
          this.$emit('add');
          break;

        case 'enable':
          this.handleEnable(row);
          break;
        case 'disable':
          this.handleDisable(row)
          break;
        case 'detail':
          this.handleDetail(row);
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.search-result-list {
  .image {
    display: block;
    width: 100%;
  }

  .result-item {
    padding-bottom: 30px;
  }

  .result-item ::v-deep .el-card__body {
    height: 0;
    padding-bottom: 100%;
    position: relative;
  }

  .content-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }

  .command-list {
    display: none;
    position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    right: 5px;
    bottom: -.5em;
  }

  .content-box:hover .command-list {
    display: block;
  }

  .command-menu {
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    padding: 0;
  }

  .command-menu__item {
    list-style: none;
    line-height: 36px;
    padding: 0 20px;
    margin: 0;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    outline: none;
  }

  .command-menu__item:focus, .command-menu__item:not(.is-disabled):hover {
    background-color: #ecf5ff;
    color: #66b1ff;
  }
}
</style>
